<template>
  <MainFrame menuIndex="EmployerList">
    <div slot='content'>
      <div class="top-title">
        雇主信息
      </div>
      <div class="page">
        <div class="top" style="margin-bottom: 10px">
          <el-row>
            <el-col :span="4">
              <el-input v-model="keyword" placeholder="请输入关键字" style="width: 90%;"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="add" icon="el-icon-plus">添加雇主信息</el-button>
            </el-col>
          </el-row>
        </div>
        <el-table :data="items" border style="width: 100%" height="780" stripe>
          <el-table-column label="编号" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">{{scope.row.no}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">{{scope.row.name}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="idcard" label="身份证号" width="200">
          </el-table-column>
          <el-table-column prop="babyBirth" label="宝宝生日" width="100">
          </el-table-column>
          <el-table-column prop="city" label="所在城市" width="150">
          </el-table-column>
          <el-table-column prop="date" label="上户时间" width="100">
          </el-table-column>
          <el-table-column prop="source" label="来源" width="100">
          </el-table-column>
          <el-table-column prop="contact" label="联系方式" width="120">
          </el-table-column>
          <el-table-column prop="liveAddress" label="居住地">
          </el-table-column>
          <el-table-column prop="type" label="类别" width="100">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" style="color:#F56C6C" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background layout="prev, pager, next" :page-count="page.total" :page-size="page.size" @current-change="onPageChanged">
      </el-pagination>
    </div>
  </MainFrame>
</template>
<script>
import MainFrame from '@/components/MainFrame';
import utils from '../ttJs/utils.js'
import { validateData } from '../ttJs/utils.js'
export default {
  components: {
    MainFrame,
  },
  data() {
    return {
      page: {
        total: 0,
        size: 0,
      },
      pageIndex: 1,
      items: [],
      keyword: ''
    };
  },
  mounted: function() {
    this.getItems(this.pageIndex);
  },
  methods: {
    onPageChanged(page) {
      this.pageIndex = page
      this.getItems(page)
    },
    getItems(page) {
      var self = this
      var url = '/ay/editor/employerList'
      var params = { page: page }
      var success = function(response) {
        self.items = response.info;
        self.page.total = response.total;
        self.page.size = response.size;
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    add() {
      var self = this
      self.$router.push({ name: 'Employer' })
    },
    edit(item) {
      var self = this
      self.$router.push({ name: 'Employer', query: { id: item.id } })
    },
    del(item) {
      var self = this
      var event = function() {
        var params = { id: item.id }
        var url = '/ay/editor/deleteEmployer'
        var success = function(response) {
          self.getItems(self.pageIndex);
          self.$message({
            message: '删除成功',
            type: 'success'
          });
        }
        var fail = function() {
          utils.fail('删除失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
      utils.del(event, '确定删除？')
    },
    search() {
      if (this.keyword == '') {
        this.getItems(this.pageIndex);
        return;
      }
      var self = this;
      var url = '/ay/editor/searchEmployer';
      var params = {
        keyword: self.keyword,
        page: self.pageIndex
      }
      var success = function(response) {
        self.items = response.info;
        self.page.total = response.total;
        self.page.size = response.size;
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    }
  }
};

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.page {
  position: relative;
  overflow: hidden;
  padding: 20px
}

.top-title {
  margin-left: 20px;
  font-size: 18px;
  font-weight: bold;
}

</style>
